@use "styles/Radius.module.scss";
@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";

.model_selection_wrapper {
  display: flex;
  justify-content: space-between;
  gap: Spacings.$spacing05;

  .model {
    width: 300px;
  }

  .max_tokens {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: Spacings.$spacing03;
    width: 300px;
    padding-top: Spacings.$spacing02;

    .slider {
      -webkit-appearance: none;
      width: 80%;
      height: 15px;
      border-radius: Radius.$normal;
      background: var(--background-primary-1);
      outline: none;
      -webkit-transition: 0.2s;
      transition: opacity 0.2s;
    }

    .slider:hover {
      opacity: 1;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 15px;
      height: 30px;
      border-radius: Radius.$big;
      background: var(--primary-0);
      cursor: pointer;
    }
  }
  @media screen and (max-width: ScreenSizes.$medium) {
    flex-direction: column;
    gap: Spacings.$spacing05;

    .model {
      width: 100%;
    }

    .max_tokens {
      width: 100%;
    }
  }
}
